<!DOCTYPE html>
<html class="csstransforms csstransforms3d csstransitions" lang="en-US"><!--<![endif]-->
    <head>
        <link rel="icon" href="data:,">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="UTF-8">
        @* 360极速模式*@
        <meta name="renderer" content="webkit">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta name="author" content="VGsoft Team">
        <title></title>

        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("bootstrap-4.6.0/dist/css/bootstrap.css")">
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("font-awesome-4.7.0/css/font-awesome.min.css")">
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("bootstrap-table-master/bootstrap-table.css") ">
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("config/main.css")">
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("bootstrap-advanced-sortable/css/bootstrap-advanced-sortable.css")">
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("bootstrap-sweetalert-master/dist/sweetalert.css")">
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("mscroll/css/lz_index.css")">


        <script src="@routes.Assets.versioned("config/jquery-3.1.1.min.js")" type ="text/javascript"></script>
        <script src="@routes.Assets.versioned("bootstrap-4.6.0/dist/js/bootstrap.bundle.js")" type ="text/javascript"></script>
        <script src="@routes.Assets.versioned("bootstrap-table-master/bootstrap-table.js")" type ="text/javascript"></script>
        <script src="@routes.Assets.versioned("bootstrap-table-master/extensions/export/bootstrap-table-export.js")" type ="text/javascript"></script>
        <script src="@routes.Assets.versioned("bootstrap-table-master/extensions/export/tableExport.min.js")" type ="text/javascript"></script>
        <script src="@routes.Assets.versioned("bootstrap-advanced-sortable/js/bootstrap-advanced-sortable-en.js")" type="text/javascript"></script>
        <script src="@routes.Assets.versioned("bootstrap-sweetalert-master/dist/sweetalert.min.js")" type="text/javascript"></script>
        <style>

        #heatmap{
            overflow-x: scroll!important;
        }

    </style>

<body style="background-color: white">

    <div class="container">





            <div class="main-body">
                @components.scrollComponents("Total identified metabolites heatmap" ) {
                    <div style="width: 100%">
                        <div id="heatmap"   ></div>
                    </div>
                }

                @components.scrollComponents("Total identified metabolites in NEC, PEC and GE" ) {
                    <div style="width: 100%">
                        <table id="table" data-pagination="true" data-advanced-sortable="true"
                        data-page-list="[10]" style="margin-top: 10px">
                            <thead>
                                <tr>
                                    <th data-field="0"  rowspan="3" data-valign="middle">Metabolite ID</th>
                                    <th data-field="1" rowspan="3" data-valign="middle">Simplified metabolite ID</th>
                                    <th  colspan="9" data-align="center">M. sativa </th>
                                    <th  colspan="9" data-align="center">M. truncatula </th>
                                </tr>
                                <tr>
                                    <th  colspan="3" data-align="center">Leaf</th>
                                    <th  colspan="3" data-align="center">taproot</th>
                                    <th  colspan="3" data-align="center">fibrous root</th>
                                    <th  colspan="3" data-align="center">Leaf</th>
                                    <th  colspan="3" data-align="center">taproot</th>
                                    <th  colspan="3" data-align="center">fibrous root</th>
                                </tr>
                                <tr>
                                    <th data-field="2">Control</th>
                                    <th data-field="3">MD</th>
                                    <th data-field="4">SD</th>
                                    <th data-field="5">Control</th>
                                    <th data-field="6">MD</th>
                                    <th data-field="7">SD</th>
                                    <th data-field="8">Control</th>
                                    <th data-field="9">MD</th>
                                    <th data-field="10">SD</th>
                                    <th data-field="11">Control</th>
                                    <th data-field="12">MD</th>
                                    <th data-field="13">SD</th>
                                    <th data-field="14">Control</th>
                                    <th data-field="15">MD</th>
                                    <th data-field="16">SD</th>
                                    <th data-field="17">Control</th>
                                    <th data-field="18">MD</th>
                                    <th data-field="19">SD</th>

                                </tr>

                            </thead>

                        </table>
                    </div>

                }

            </div>
        </div>
</body>

    <script src="@routes.Assets.versioned("mscroll/js/mscroll.js")" type="text/javascript"></script>

    <script src="@routes.Assets.versioned("Highcharts-9.0.1/highcharts.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/highcharts-more.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/modules/exporting.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/modules/data.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/modules/heatmap.js")" type ="text/javascript"></script>
    <script>

        $(function (){
            $.post("@routes.MetaController.getMdSdData()",(data)=>{
                $("#table").bootstrapTable({data:data.table})

                heatmap(data.heatmap)


            })

        })


        function heatmap(data) {
            let yAxis =["M. sativa Leaf Control","M. sativa Leaf MD","M. sativa Leaf SD","M. sativa taproot Control","M. sativa taproot MD","M. sativa taproot SD","M. sativa fibrous root Control","M. sativa fibrous root MD","M. sativa fibrous root SD","M. truncatula Leaf Control","M. truncatula Leaf MD","M. truncatula Leaf SD","M. truncatula taproot Control","M. truncatula taproot MD","M. truncatula taproot SD","M. truncatula fibrous root Control","M. truncatula fibrous root MD","M. truncatula fibrous root SD"]
            Highcharts.chart('heatmap', {
                credits: {
                    enabled: false
                },
                data: {
                    csv: data.csv,
                },
                exporting: {
                    buttons: {
                        contextButton: {
                            menuItems: ["downloadPNG", "downloadJPEG", "downloadPDF", "downloadSVG"]
                        }
                    }
                },
                chart: {
                    type: 'heatmap',
                    height: 600,
                    width: 10000,
                    margin: [60, 10, 250, 250],
                    scrollablePlotArea: {
                        minWidth: 700,
                        scrollPositionX: 1
                    }
                 //   zoomType: 'xy'
                },
                title: {
                    text: "Medicago sativa and Medicago truncatula_MD_SD"
                },
                xAxis: {
                    categories: data.xAxis,
                    //  startOnTick: true,
                    labels: {
                        align: 'right',
                        rotation: -90,
                        style: {
                            fontSize: '12px',
                            fontFamily: 'Arial, sans-serif'
                        }
                    }
                },
                yAxis: {
                    categories:         yAxis,
                    title: "Gene",
                    endOnTick: false,
                    gridLineWidth: 0,
                    minorGridLineWidth: 0,
                    // showLastLabel:true
                },
                colorAxis: {
                    stops: [
                        [0.1, '#355F8D  '],
                        [0.5, '#2CA981'],
                        [1, '#F1E628']
                    ],
                    /*            min: data.min,
                                max: data.max,*/
                },
                legend: {
                    title: {
                        style: {
                            fontWeight: '1',
                            color: '#555',
                            fontSize: '12px'
                        },
                        text: 'Expression(log2(TPM+1))'
                    }
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + data.xAxis[this.point.x] + '</b><br/>' +
                                yAxis[this.point.y] + '<br><b>Expression(log2(TPM+1)): ' + this.point.value + '</b> '
                                     ;
                    }
                },
                series: [{
                    borderWidth: 1,
                    borderColor:"white",
                    turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
                }]
            });
        }

    </script>

</html>


